<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML | 静思田园</title>
    <meta name="description" content="时不时记录一点点">
    <meta name="generator" content="VitePress v1.5.0">
    <link rel="preload stylesheet" href="/assets/style.D1KHeDuB.css" as="style">
    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
    <script type="module" src="/assets/chunks/metadata.d4b76d32.js"></script>
    <script type="module" src="/assets/app.Cqoht_Of.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.trnLO_3_.js">
    <link rel="modulepreload" href="/assets/chunks/theme.BNMYWj-o.js">
    <link rel="modulepreload" href="/assets/chunks/katex.BZy9Y_85.js">
    <link rel="modulepreload" href="/assets/chunks/c4Diagram-3d4e48cf.rhyfUO3k.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-66a62f08.BvVfKYLl.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-v2-96b9c2cf.rYAPEXyw.js">
    <link rel="modulepreload" href="/assets/chunks/erDiagram-9861fffd.CQSbaoJM.js">
    <link rel="modulepreload" href="/assets/chunks/gitGraphDiagram-72cf32ee.CjLmC8RV.js">
    <link rel="modulepreload" href="/assets/chunks/ganttDiagram-c361ad54.R_V-FeK5.js">
    <link rel="modulepreload" href="/assets/chunks/infoDiagram-f8f76790.C-2Va9KZ.js">
    <link rel="modulepreload" href="/assets/chunks/pieDiagram-8a3498a8.B9ZVkD7K.js">
    <link rel="modulepreload" href="/assets/chunks/quadrantDiagram-120e2f19.BuonnDHi.js">
    <link rel="modulepreload" href="/assets/chunks/xychartDiagram-e933f94c.C_bIYaUn.js">
    <link rel="modulepreload" href="/assets/chunks/requirementDiagram-deff3bca.RFVzvdjl.js">
    <link rel="modulepreload" href="/assets/chunks/sequenceDiagram-704730f1.UZWxMlyq.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-70f12bd4.sipmPMFa.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-v2-f2320105.CDkLxQ0T.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-587899a1.CD2ocVZB.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-v2-d93cdb3a.D0qUPm3J.js">
    <link rel="modulepreload" href="/assets/chunks/journeyDiagram-49397b02.CeUUZA2l.js">
    <link rel="modulepreload" href="/assets/chunks/flowchart-elk-definition-4a651766.DkdgpMTf.js">
    <link rel="modulepreload" href="/assets/chunks/timeline-definition-85554ec2.WL9yxus9.js">
    <link rel="modulepreload" href="/assets/chunks/mindmap-definition-fc14e90a.CWC2bxmB.js">
    <link rel="modulepreload" href="/assets/chunks/sankeyDiagram-04a897e0.BXj8OViR.js">
    <link rel="modulepreload" href="/assets/chunks/blockDiagram-38ab4fdb.CPVnJXk5.js">
    <link rel="modulepreload" href="/assets/chunks/virtual_mermaid-config.DDnGl6nM.js">
    <link rel="modulepreload" href="/assets/frontend_html_index.md.nfMijkRU.lean.js">
    <meta name="application-name" content="VuePress">
    <meta name="apple-mobile-web-app-title" content="静思田园">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#3eaf7c">
    <meta name="theme-color" content="#646cff">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>静思田园</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57></span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/network/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>网络工程师</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/frontend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/English/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Scrupy/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>爬虫</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/backend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>后端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bigdata/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>大数据</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/computer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>计算机基础</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/database/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>数据库</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docker/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>dorker</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Git</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/nodejs/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Node.js</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/python/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Python</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/shell/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>shell</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tools/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>工具</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>HTML</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/html/" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>HTML</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/html/emmet.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Emmet语法总结</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _frontend_html_" data-v-39a288b8><div><h1 id="html" tabindex="-1">HTML <a class="header-anchor" href="#html" aria-label="Permalink to &quot;HTML&quot;">​</a></h1><table tabindex="0"><thead><tr><th>网站</th><th>备注</th></tr></thead><tbody><tr><td><a href="https://codepen.io/your-work" target="_blank" rel="noreferrer">codepen</a></td><td>前端在线编辑，可保存</td></tr><tr><td><a href="https://jsfiddle.net/" target="_blank" rel="noreferrer">jsfiddle</a></td><td>前端在线编辑</td></tr><tr><td><a href="https://htmledit.squarefree.com/" target="_blank" rel="noreferrer">仅html实时显示</a></td><td></td></tr><tr><td><a href="https://www.w3school.com.cn/tags/index.asp" target="_blank" rel="noreferrer">w3cschool</a></td><td></td></tr><tr><td><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" rel="noreferrer">mdn</a></td><td><a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank" rel="noreferrer">mdn中文</a></td></tr></tbody></table><h2 id="html基础" tabindex="-1">HTML基础 <a class="header-anchor" href="#html基础" aria-label="Permalink to &quot;HTML基础&quot;">​</a></h2><p>HTML(Hyper Text Mark-up Language )即是超文本标记语言，通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上，HTML 不是一种编程语言。</p><h3 id="特点" tabindex="-1">特点 <a class="header-anchor" href="#特点" aria-label="Permalink to &quot;特点&quot;">​</a></h3><ul><li>HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。</li><li>和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些<a href="https://www.w3cschool.cn/htmltags/html-reference.html" target="_blank" rel="noreferrer">Tag</a>，中文称“<a href="https://www.w3cschool.cn/htmltags/ref-byfunc.html" target="_blank" rel="noreferrer">标记</a>”。</li><li>一个HTML文件的后缀名是.htm或者是.html。</li><li>HTML是大小写不敏感的,HTML与html是一样的</li></ul><h3 id="url" tabindex="-1">URL <a class="header-anchor" href="#url" aria-label="Permalink to &quot;URL&quot;">​</a></h3><p>统一资源定位符，用于表示资源在网络上的地址，每个部分以<code>/</code>进行分隔。</p><p><strong>http网络资源</strong></p><div class="language-http line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">http</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">https://www.dotohi.com/mypapth/model.html?arg=1&amp;name=fh#anchor</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><strong>FTP文件下载</strong></p><div class="language-http line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">http</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">ftp://ftp.dotohi.com/download-path/second-path/ftp.pdf</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><strong>MAILTO邮箱地址</strong></p><div class="language-http line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">http</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#E06C75;">mailto</span><span style="color:#C678DD;">:</span><span style="color:#98C379;">1044531744@qq.com</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><strong>参数说明</strong></p><table tabindex="0"><thead><tr><th style="text-align:left;">参数</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">https</td><td style="text-align:left;">访问协议 http 或 https、ftp、mailto</td></tr><tr><td style="text-align:left;">www.dotohi.com</td><td style="text-align:left;">服务器地址</td></tr><tr><td style="text-align:left;">download-path/second-path</td><td style="text-align:left;">资源目录</td></tr><tr><td style="text-align:left;">ftp.pdf</td><td style="text-align:left;">文件名</td></tr><tr><td style="text-align:left;">arg=1&amp;name=fh</td><td style="text-align:left;">参数</td></tr><tr><td style="text-align:left;">#anchor</td><td style="text-align:left;">锚点</td></tr></tbody></table><h3 id="注释" tabindex="-1">注释 <a class="header-anchor" href="#注释" aria-label="Permalink to &quot;注释&quot;">​</a></h3><p>注释对一段 html 代码进行说明。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;</span><span style="color:#E06C75;">fieldset</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;</span><span style="color:#E06C75;">legend</span><span style="color:#ABB2BF;">&gt;Personalia:&lt;/</span><span style="color:#E06C75;">legend</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            Name: &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> size</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;30&quot;</span><span style="color:#ABB2BF;"> /&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            Email: &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> size</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;30&quot;</span><span style="color:#ABB2BF;"> /&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            Date of birth: &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> size</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;10&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;/</span><span style="color:#E06C75;">fieldset</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="访问路径" tabindex="-1">访问路径 <a class="header-anchor" href="#访问路径" aria-label="Permalink to &quot;访问路径&quot;">​</a></h3><h4 id="绝对路径" tabindex="-1">绝对路径 <a class="header-anchor" href="#绝对路径" aria-label="Permalink to &quot;绝对路径&quot;">​</a></h4><p>绝对路径包含<code>主机+服务器地址+目录+文件名</code>的完整路径</p><div class="language-http line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">http</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">https://www.dotohi.com/frontend/Javascript/console-color.html</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h4 id="相对路径" tabindex="-1">相对路径 <a class="header-anchor" href="#相对路径" aria-label="Permalink to &quot;相对路径&quot;">​</a></h4><p>相对路径是指相对当前目录的地址</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;"># 当前目录的文件</span></span>
<span class="line"><span style="color:#ABB2BF;">now.html</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;"># 上级目录中的文件</span></span>
<span class="line"><span style="color:#ABB2BF;">../prev.html</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;"># 子目录中的文件</span></span>
<span class="line"><span style="color:#ABB2BF;">children/son.html</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;"># 根目录中的文件</span></span>
<span class="line"><span style="color:#ABB2BF;">/root.html</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="页面结构" tabindex="-1">页面结构 <a class="header-anchor" href="#页面结构" aria-label="Permalink to &quot;页面结构&quot;">​</a></h2><h3 id="语义标签" tabindex="-1">语义标签 <a class="header-anchor" href="#语义标签" aria-label="Permalink to &quot;语义标签&quot;">​</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;标题&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt; </span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;段落&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">&lt;!-- 图片--&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">img</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;path.png&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="嵌套关系" tabindex="-1">嵌套关系 <a class="header-anchor" href="#嵌套关系" aria-label="Permalink to &quot;嵌套关系&quot;">​</a></h3><p>元素可以互相嵌套包裹，即元素存在<a href="https://jd.com" target="_blank" rel="noreferrer">父子</a>级关系，属于树状结构。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">		&lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;service_entry&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">			&lt;</span><span style="color:#E06C75;">ul</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;J_tab_head service_list&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">				&lt;</span><span style="color:#E06C75;">li</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;service_item noframe&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">					&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://jiayouka.jd.com/&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">						&lt;</span><span style="color:#E06C75;">i</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;service_ico&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">							&lt;</span><span style="color:#E06C75;">img</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;img&quot;</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://m.360buyimg.com/babel.png&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">						&lt;/</span><span style="color:#E06C75;">i</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">						&lt;</span><span style="color:#E06C75;">span</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;service_txt&quot;</span><span style="color:#ABB2BF;">&gt;加油卡&lt;/</span><span style="color:#E06C75;">span</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">					&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">				&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">			&lt;/</span><span style="color:#E06C75;">ul</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">		&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="基本结构" tabindex="-1">基本结构 <a class="header-anchor" href="#基本结构" aria-label="Permalink to &quot;基本结构&quot;">​</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;!</span><span style="color:#E06C75;">DOCTYPE</span><span style="color:#D19A66;"> html</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">html</span><span style="color:#D19A66;"> lang</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;en&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">head</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">meta</span><span style="color:#D19A66;"> charset</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;UTF-8&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">meta</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;viewport&quot;</span><span style="color:#D19A66;"> content</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">title</span><span style="color:#ABB2BF;">&gt;Document&lt;/</span><span style="color:#E06C75;">title</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">head</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">html</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><table tabindex="0"><thead><tr><th style="text-align:left;">标签</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">DOCTYPE</td><td style="text-align:left;">声明为 HTML 文档</td></tr><tr><td style="text-align:left;">html</td><td style="text-align:left;">lang:网页的语言，如 en/zh 等，非必选项目</td></tr><tr><td style="text-align:left;">head</td><td style="text-align:left;">文档说明部分，对搜索引擎提供信息或加载 CSS、JS 等</td></tr><tr><td style="text-align:left;">title</td><td style="text-align:left;">网页标题</td></tr><tr><td style="text-align:left;">keyword</td><td style="text-align:left;">向搜索引擎说明你的网页的关键词</td></tr><tr><td style="text-align:left;">description</td><td style="text-align:left;">向搜索引擎描述网页内容的摘要信息</td></tr><tr><td style="text-align:left;">body</td><td style="text-align:left;">页面主体内容</td></tr></tbody></table><h3 id="内容标题" tabindex="-1">内容标题 <a class="header-anchor" href="#内容标题" aria-label="Permalink to &quot;内容标题&quot;">​</a></h3><p>标题使用 <code>h1 ~ h6</code> 来定义，用于突出显示文档内容。</p><ul><li>从 h1 到 h6 对搜索引擎来说权重会越来越小</li><li>页面中最好只有一个 h1 标签</li><li>标题最好不要嵌套如 h1 内部包含 h2</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;1级标题&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;2级标题&lt;/</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h3</span><span style="color:#ABB2BF;">&gt;3级标题&lt;/</span><span style="color:#E06C75;">h3</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h4</span><span style="color:#ABB2BF;">&gt;4级标题&lt;/</span><span style="color:#E06C75;">h4</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h5</span><span style="color:#ABB2BF;">&gt;5级标题&lt;/</span><span style="color:#E06C75;">h5</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">h6</span><span style="color:#ABB2BF;">&gt;6级标题&lt;/</span><span style="color:#E06C75;">h6</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="h1" tabindex="-1">h1 <a class="header-anchor" href="#h1" aria-label="Permalink to &quot;h1&quot;">​</a></h4><h1>1级标题</h1><h4 id="h2" tabindex="-1">h2 <a class="header-anchor" href="#h2" aria-label="Permalink to &quot;h2&quot;">​</a></h4><h2>2级标题</h2><h4 id="h3" tabindex="-1">h3 <a class="header-anchor" href="#h3" aria-label="Permalink to &quot;h3&quot;">​</a></h4><h3>3级标题</h3><h4 id="h4" tabindex="-1">h4 <a class="header-anchor" href="#h4" aria-label="Permalink to &quot;h4&quot;">​</a></h4><h4>4级标题</h4><h4 id="h5" tabindex="-1">h5 <a class="header-anchor" href="#h5" aria-label="Permalink to &quot;h5&quot;">​</a></h4><h5>5级标题</h5><h4 id="h6" tabindex="-1">h6 <a class="header-anchor" href="#h6" aria-label="Permalink to &quot;h6&quot;">​</a></h4><h6>6级标题</h6><h3 id="页眉页脚、导航、主体内容" tabindex="-1">页眉页脚、导航、主体内容 <a class="header-anchor" href="#页眉页脚、导航、主体内容" aria-label="Permalink to &quot;页眉页脚、导航、主体内容&quot;">​</a></h3><h4 id="header" tabindex="-1">header <a class="header-anchor" href="#header" aria-label="Permalink to &quot;header&quot;">​</a></h4><p><code>header</code>标签是用来定义网页或者模块的头部</p><h4 id="nav" tabindex="-1">nav <a class="header-anchor" href="#nav" aria-label="Permalink to &quot;nav&quot;">​</a></h4><p>在 HTML 中使用<code>nav</code>设置导航链接。</p><h4 id="main" tabindex="-1">main <a class="header-anchor" href="#main" aria-label="Permalink to &quot;main&quot;">​</a></h4><p>HTML5 中使用 <code>main</code> 标签表示页面主要区域，一个页面中<code>main</code>元素最好只出现一次。</p><h4 id="footer" tabindex="-1">footer <a class="header-anchor" href="#footer" aria-label="Permalink to &quot;footer&quot;">​</a></h4><p><code>footer</code> 标签定义网页或者模块的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;!</span><span style="color:#E06C75;">DOCTYPE</span><span style="color:#D19A66;"> html</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">html</span><span style="color:#D19A66;"> lang</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;en&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">head</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">meta</span><span style="color:#D19A66;"> charset</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;UTF-8&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">meta</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;viewport&quot;</span><span style="color:#D19A66;"> content</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">title</span><span style="color:#ABB2BF;">&gt;Document&lt;/</span><span style="color:#E06C75;">title</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">head</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">  &lt;!-- header --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">header</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;</span><span style="color:#E06C75;">nav</span><span style="color:#ABB2BF;">&gt; </span><span style="color:#7F848E;font-style:italic;">&lt;!-- nav --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;</span><span style="color:#E06C75;">ul</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#ABB2BF;">&gt;tab 1&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#ABB2BF;">&gt;tab 2&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;/</span><span style="color:#E06C75;">ul</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;/</span><span style="color:#E06C75;">nav</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">header</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    主体内容</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">   &lt;!-- footer --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">footer</span><span style="color:#ABB2BF;">&gt; </span></span>
<span class="line"><span style="color:#ABB2BF;">  	&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;冀ICP备19024518号&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;京公网安备11010802043456&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;Copyright © 2020-2024 Loveagri&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">footer</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">body</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">html</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="内容区域" tabindex="-1">内容区域 <a class="header-anchor" href="#内容区域" aria-label="Permalink to &quot;内容区域&quot;">​</a></h3><h4 id="article" tabindex="-1">article <a class="header-anchor" href="#article" aria-label="Permalink to &quot;article&quot;">​</a></h4><p>使用 <code>article</code> 标签主要作用是表示独立的内容单元。通常对应于文章、博客、新闻等。使用 article 标签，可以明确区分网页上的不同内容部分，提升网页的可读性和语义化水平，通过将一篇博客或资讯整体包裹在 article 标签中，可以清晰展示其主体内容。内部，可以进一步利用 section、article、aside 等标签进行更细致的结构划分。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">article</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">header</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;这是一篇博客的标题&lt;/</span><span style="color:#E06C75;">h1</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;这是博客的摘要。&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">header</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;这是博客的主体内容。&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">  &lt;!-- 其他博客内容 --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">article</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="区块定义" tabindex="-1">区块定义 <a class="header-anchor" href="#区块定义" aria-label="Permalink to &quot;区块定义&quot;">​</a></h3><h4 id="section" tabindex="-1">section <a class="header-anchor" href="#section" aria-label="Permalink to &quot;section&quot;">​</a></h4><p>使用 <code>section</code> 定义一个区块，一般是一组相似内容的排列组合。使用section标签来分隔相关的内容或引用或者分隔不同的文章或章节。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">article</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">section</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;文章标题&lt;/</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;这是一篇关于...的文章。&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">section</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">section</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;文章标题&lt;/</span><span style="color:#E06C75;">h2</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;这是一篇关于...的文章。&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;/</span><span style="color:#E06C75;">section</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">article</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="附加区域" tabindex="-1">附加区域 <a class="header-anchor" href="#附加区域" aria-label="Permalink to &quot;附加区域&quot;">​</a></h3><h4 id="aside" tabindex="-1">aside <a class="header-anchor" href="#aside" aria-label="Permalink to &quot;aside&quot;">​</a></h4><p>使用 <code>aside</code> 用来表示页面主内容之外的内容，通常用于侧边栏、导航链接、广告等。</p><h3 id="通用容器" tabindex="-1">通用容器 <a class="header-anchor" href="#通用容器" aria-label="Permalink to &quot;通用容器&quot;">​</a></h3><h4 id="div" tabindex="-1">div <a class="header-anchor" href="#div" aria-label="Permalink to &quot;div&quot;">​</a></h4><p><code>div</code> 是 HTML 中的一个块级元素，用于分组和格式化其他 HTML 元素。它没有预定义的语义，通常用于构建网页布局。有些区域这些有语义的容器不好表达，这时可以采用<code>div</code>容器，比如轮播图效果中的内容。</p><h2 id="文本相关" tabindex="-1">文本相关 <a class="header-anchor" href="#文本相关" aria-label="Permalink to &quot;文本相关&quot;">​</a></h2><h3 id="基本标签" tabindex="-1">基本标签 <a class="header-anchor" href="#基本标签" aria-label="Permalink to &quot;基本标签&quot;">​</a></h3><h4 id="p" tabindex="-1">p <a class="header-anchor" href="#p" aria-label="Permalink to &quot;p&quot;">​</a></h4><p><code>p</code>标签用于定义段落。段落通常由一段文字组成，它们之间会自动插入一些空白。</p><h4 id="pre" tabindex="-1">pre <a class="header-anchor" href="#pre" aria-label="Permalink to &quot;pre&quot;">​</a></h4><p><code>pre</code> 标签是 HTML 中用于表示预格式化文本的标签。被包含在 <code>pre</code> 标签中的文本会保持原有的空格和换行符，而且文本会使用等宽字体显示。这使得 <code>pre</code> 标签在展示计算机源代码或者文本的时候非常有用。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">pre</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">for i in range(10):</span></span>
<span class="line"><span style="color:#ABB2BF;">    print(i)</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">pre</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><pre>for i in range(10):
    print(i)
</pre><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">pre</span><span style="color:#D19A66;"> lang</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;html&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#E06C75;">&amp;lt;</span><span style="color:#ABB2BF;">html</span><span style="color:#E06C75;">&amp;gt;</span></span>
<span class="line"><span style="color:#E06C75;">    &amp;lt;</span><span style="color:#ABB2BF;">body</span><span style="color:#E06C75;">&amp;gt;</span></span>
<span class="line"><span style="color:#E06C75;">        &amp;lt;</span><span style="color:#ABB2BF;">p</span><span style="color:#E06C75;">&amp;gt;</span><span style="color:#ABB2BF;">Hello, World!</span><span style="color:#E06C75;">&amp;lt;</span><span style="color:#ABB2BF;">/p</span><span style="color:#E06C75;">&amp;gt;</span></span>
<span class="line"><span style="color:#E06C75;">    &amp;lt;</span><span style="color:#ABB2BF;">/body</span><span style="color:#E06C75;">&amp;gt;</span></span>
<span class="line"><span style="color:#E06C75;">&amp;lt;</span><span style="color:#ABB2BF;">/html</span><span style="color:#E06C75;">&amp;gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">pre</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><pre lang="html">&lt;html&gt;
    &lt;body&gt;
        &lt;p&gt;Hello, World!&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre><h4 id="br" tabindex="-1">br <a class="header-anchor" href="#br" aria-label="Permalink to &quot;br&quot;">​</a></h4><p>在<code>html</code> 中回车是忽略的，使用 <code>br</code> 标签可以实现换行效果。</p><h4 id="span" tabindex="-1">span <a class="header-anchor" href="#span" aria-label="Permalink to &quot;span&quot;">​</a></h4><p><code>span</code> 标签与 <code>div</code> 标签都是没有语义的，是 HTML 中的一个行内（inline）元素，通常用于在文本中添加样式或者用于包裹文本以便通过 CSS 进行样式设置或其他操作。</p><h3 id="描述文本" tabindex="-1">描述文本 <a class="header-anchor" href="#描述文本" aria-label="Permalink to &quot;描述文本&quot;">​</a></h3><p><code>small</code> 标签在 HTML5 中是用来定义小号文本的。它常常用于脚注、脚本、 copyright 等细 print 字体的文本。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;This is a paragraph with a &lt;</span><span style="color:#E06C75;">small</span><span style="color:#ABB2BF;">&gt;small&lt;/</span><span style="color:#E06C75;">small</span><span style="color:#ABB2BF;">&gt; word in it.&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>This is a paragraph with a <small>small</small> word in it.</p><h4 id="time" tabindex="-1">time <a class="header-anchor" href="#time" aria-label="Permalink to &quot;time&quot;">​</a></h4><p>用来表示日期和时间。它有一个 <code>datetime</code> 属性，这个属性用来存储标准的日期和时间字符串，这样可以确保即使在没有 JavaScript 的情况下，也能正确地显示日期和时间。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">  The event will happen on &lt;</span><span style="color:#E06C75;">time</span><span style="color:#D19A66;"> datetime</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;2022-02-20&quot;</span><span style="color:#ABB2BF;">&gt;Feb 21, 2022&lt;/</span><span style="color:#E06C75;">time</span><span style="color:#ABB2BF;">&gt; at &lt;</span><span style="color:#E06C75;">time</span><span style="color:#D19A66;"> datetime</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;2022-02-20T14:00&quot;</span><span style="color:#ABB2BF;">&gt;2 pm&lt;/</span><span style="color:#E06C75;">time</span><span style="color:#ABB2BF;">&gt;.</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p> The event will happen on <time datetime="2022-02-20">Feb 21, 2022</time> at <time datetime="2022-02-20T14:00">2 pm</time>. </p><h4 id="abbr" tabindex="-1">abbr <a class="header-anchor" href="#abbr" aria-label="Permalink to &quot;abbr&quot;">​</a></h4><p>用于表示一个缩写形式，还可以提供一个可选的 <code>title</code> 属性，当用户将鼠标悬停在该元素上时，会显示出 <code>title</code> 属性中的文本。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">abbr</span><span style="color:#D19A66;"> title</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;World Health Organization&quot;</span><span style="color:#ABB2BF;">&gt;WHO&lt;/</span><span style="color:#E06C75;">abbr</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><abbr title="World Health Organization">WHO</abbr></p><h4 id="sub" tabindex="-1">sub <a class="header-anchor" href="#sub" aria-label="Permalink to &quot;sub&quot;">​</a></h4><p>下标文本会以当前字体尺寸的一半来显示，且不会 line-break（不会换行）。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;这是水分子的方程式：H&lt;</span><span style="color:#E06C75;">sub</span><span style="color:#ABB2BF;">&gt;2&lt;/</span><span style="color:#E06C75;">sub</span><span style="color:#ABB2BF;">&gt;O&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>这是水分子的方程式：H<sub>2</sub>O</p><h4 id="sup" tabindex="-1">sup <a class="header-anchor" href="#sup" aria-label="Permalink to &quot;sup&quot;">​</a></h4><p>上标常用于表示上标注释，如化学公式中的氧化数，或者在文本中表示上标注释时。 CSS 属性 <code>vertical-align: super</code> 来创建上标效果</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;This is an example of the O&lt;</span><span style="color:#E06C75;">sup</span><span style="color:#ABB2BF;">&gt;2&lt;/</span><span style="color:#E06C75;">sup</span><span style="color:#ABB2BF;">&gt; signal.&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>This is an example of the O<sup>2</sup> signal.</p><h4 id="del-ins" tabindex="-1">del &amp; ins <a class="header-anchor" href="#del-ins" aria-label="Permalink to &quot;del &amp; ins&quot;">​</a></h4><p>表示已经被删除的文本。这通常用于表示文本内容已经被修改或更新，而原始内容应该被视为已经不再相关，<code>ins</code> 一般与 <code>del</code> 标签配合使用描述更新与修正。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;原价 &lt;</span><span style="color:#E06C75;">del</span><span style="color:#ABB2BF;">&gt;200元&lt;/</span><span style="color:#E06C75;">del</span><span style="color:#ABB2BF;">&gt; 现价 &lt;</span><span style="color:#E06C75;">ins</span><span style="color:#ABB2BF;">&gt;100元&lt;/</span><span style="color:#E06C75;">ins</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">p</span><span style="color:#FFFFFF;">/</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>原价 <del>200元</del> 现价 <ins>100元</ins></p><h4 id="s" tabindex="-1">s <a class="header-anchor" href="#s" aria-label="Permalink to &quot;s&quot;">​</a></h4><p><code>s</code>标签是 <code>strike</code> 标签的缩写版本，<code>s</code> 标签显示效果与 <code>del</code> 相似，但语义用来定义那些不正确、不准确或没有用的文本。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">s</span><span style="color:#ABB2BF;">&gt;My car is blue.&lt;/</span><span style="color:#E06C75;">s</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;My new car is silver.&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><s>My car is blue.</s></p> <p>My new car is silver.</p><h4 id="code" tabindex="-1">code <a class="header-anchor" href="#code" aria-label="Permalink to &quot;code&quot;">​</a></h4><p><code>code</code>标签用于表示计算机源代码或者其他机器可读的文本内容。它通常被嵌入在<code>&lt;pre&gt;</code>标签中，以保持文本的格式。<code>&lt;pre&gt;</code>标签用于预格式化的文本，意味着文本会保留空格和换行符。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">pre</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">code</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  function helloWorld() {</span></span>
<span class="line"><span style="color:#ABB2BF;">      console.log(&quot;Hello, world!&quot;);</span></span>
<span class="line"><span style="color:#ABB2BF;">  }</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">code</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">pre</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><pre><code>
function helloWorld() {
    console.log(&quot;Hello, world!&quot;);
}
</code>
</pre><h4 id="progress" tabindex="-1">progress <a class="header-anchor" href="#progress" aria-label="Permalink to &quot;progress&quot;">​</a></h4><p><code>&lt;progress&gt;</code> 标签用于表示一个进度条，通常用于表示任务的完成进度，如下载进度、加载进度等。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">progress</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;50&quot;</span><span style="color:#D19A66;"> max</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;100&quot;</span><span style="color:#ABB2BF;">&gt;50%&lt;/</span><span style="color:#E06C75;">progress</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><progress value="50" max="100">50%</progress></p><h3 id="强调文本" tabindex="-1">强调文本 <a class="header-anchor" href="#强调文本" aria-label="Permalink to &quot;强调文本&quot;">​</a></h3><h4 id="strong" tabindex="-1">strong <a class="header-anchor" href="#strong" aria-label="Permalink to &quot;strong&quot;">​</a></h4><p><code>strong</code> 标签和 <code>em</code> 一样，用于强调文本，并且<code>em</code>是斜体。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">em</span><span style="color:#ABB2BF;">&gt;强调文本&lt;/</span><span style="color:#E06C75;">em</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">strong</span><span style="color:#ABB2BF;">&gt;加粗文本&lt;/</span><span style="color:#E06C75;">strong</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">dfn</span><span style="color:#ABB2BF;">&gt;定义项目&lt;/</span><span style="color:#E06C75;">dfn</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">code</span><span style="color:#ABB2BF;">&gt;一段电脑代码 print(&quot;Hello World&quot;)&lt;/</span><span style="color:#E06C75;">code</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">samp</span><span style="color:#ABB2BF;">&gt;计算机样本&lt;/</span><span style="color:#E06C75;">samp</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">kbd</span><span style="color:#ABB2BF;">&gt;键盘输入&lt;/</span><span style="color:#E06C75;">kbd</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">var</span><span style="color:#ABB2BF;">&gt;变量&lt;/</span><span style="color:#E06C75;">var</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><em>强调文本</em><br><strong>加粗文本</strong><br><dfn>定义项目</dfn><br><code>一段电脑代码 print(&quot;Hello World&quot;)</code><br><samp>计算机样本</samp><br><kbd>键盘输入</kbd><br><var>变量</var></p><h4 id="mark" tabindex="-1">mark <a class="header-anchor" href="#mark" aria-label="Permalink to &quot;mark&quot;">​</a></h4><p>用于突出显示文本内容，类似我们生活中使用的马克笔。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;Do not forget to buy &lt;</span><span style="color:#E06C75;">mark</span><span style="color:#ABB2BF;">&gt;milk&lt;/</span><span style="color:#E06C75;">mark</span><span style="color:#ABB2BF;">&gt; today.&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Do not forget to buy <mark>milk</mark> today.</p><h3 id="引用标签" tabindex="-1">引用标签 <a class="header-anchor" href="#引用标签" aria-label="Permalink to &quot;引用标签&quot;">​</a></h3><h4 id="cite" tabindex="-1">cite <a class="header-anchor" href="#cite" aria-label="Permalink to &quot;cite&quot;">​</a></h4><p><code>cite</code> 表示作品的标题，比如书籍、歌曲、电影、论文等。它通常被用来表示一个引用的来源，或者是一个作品的标题。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;《人民日报》在其2008年版《中国科技十大成就》中提到，  &lt;</span><span style="color:#E06C75;">cite</span><span style="color:#ABB2BF;">&gt;中国科技进步 &lt;/</span><span style="color:#E06C75;">cite</span><span style="color:#ABB2BF;">&gt;  对世界科技发展作出了重大贡献。&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>《人民日报》在其2008年版《中国科技十大成就》中提到， <cite>中国科技进步 </cite> 对世界科技发展作出了重大贡献。</p><h4 id="blockquote" tabindex="-1">blockquote <a class="header-anchor" href="#blockquote" aria-label="Permalink to &quot;blockquote&quot;">​</a></h4><p><code>blockquote</code> 用于定义一个块引用，即一个引用自其他来源的段落。它可以包含文本、换行符以及其他 HTML 元素，是与<code>cite</code>配合使用标签。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">blockquote</span><span style="color:#D19A66;"> cite</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.dotohi.com&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  这是一个块引用。这里的文本来自其他的来源，例如书籍、杂志、网站或其他作者。</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">blockquote</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote cite="https://www.dotohi.com"> 这是一个块引用。这里的文本来自其他的来源，例如书籍、杂志、网站或其他作者。 </blockquote><h4 id="q" tabindex="-1">q <a class="header-anchor" href="#q" aria-label="Permalink to &quot;q&quot;">​</a></h4><p><code>q</code> 用于表示行内短的引用文本，并会在大部分浏览器中会加上引号。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;最初的HTML版本由&lt;</span><span style="color:#E06C75;">q</span><span style="color:#ABB2BF;">&gt;Tim Berners-Lee&lt;/</span><span style="color:#E06C75;">q</span><span style="color:#ABB2BF;">&gt;在1991年创建。&lt;/</span><span style="color:#E06C75;">p</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>最初的HTML版本由<q>Tim Berners-Lee</q>在1991年创建。</p><h3 id="联系信息" tabindex="-1">联系信息 <a class="header-anchor" href="#联系信息" aria-label="Permalink to &quot;联系信息&quot;">​</a></h3><h4 id="address" tabindex="-1">address <a class="header-anchor" href="#address" aria-label="Permalink to &quot;address&quot;">​</a></h4><p>用于设置联系地址等信息，一般将<code>address</code> 放在<code>footer</code> 标签中。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">address</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">Written by &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;mailto:webmaster@example.com&quot;</span><span style="color:#ABB2BF;">&gt;Jon Doe&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;.&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">Visit us at:&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">Example.com&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">Box 564, Disneyland&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">USA</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">address</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address><h2 id="图片与链接" tabindex="-1">图片与链接 <a class="header-anchor" href="#图片与链接" aria-label="Permalink to &quot;图片与链接&quot;">​</a></h2><h3 id="图片" tabindex="-1">图片 <a class="header-anchor" href="#图片" aria-label="Permalink to &quot;图片&quot;">​</a></h3><ul><li>网络带宽成本很高，图片处理在保证用户体验好的前提下，文件尺寸也要尽可能小</li><li>图片属性静态文件，不要放在 WEB 服务器上，而放在云储存服务器上并使用 CDN 加速</li><li>以 JPEG 类型优先使用，文件尺寸更小</li><li>小图片使用 PNG，清晰度更高，因为文件尺寸小，文件也不会太大</li><li>网页图标建议使用 css 字体构建如 <a href="https://www.iconfont.cn/" target="_blank" rel="noreferrer">iconfont</a> 或 <a href="https://fontawesome.com/icons?d=gallery" target="_blank" rel="noreferrer">fontawesome</a></li></ul><table tabindex="0"><thead><tr><th style="text-align:left;">格式</th><th style="text-align:left;">说明</th><th style="text-align:left;">透明</th></tr></thead><tbody><tr><td style="text-align:left;">PNG</td><td style="text-align:left;">无损压缩格式，适合图标、验证码等，可以设置透明色。有些小图标建议使用 css 字体构建。</td><td style="text-align:left;">支持</td></tr><tr><td style="text-align:left;">GIF</td><td style="text-align:left;">256 色，可以产生动画效果（即 GIF 动图）</td><td style="text-align:left;">支持</td></tr><tr><td style="text-align:left;">JPEG</td><td style="text-align:left;">有损压缩的类型，如商品、文章的图片展示</td><td style="text-align:left;"></td></tr></tbody></table><h4 id="img" tabindex="-1">img <a class="header-anchor" href="#img" aria-label="Permalink to &quot;img&quot;">​</a></h4><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">img</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.w3school.com.cn/i/photo/tulip.jpg&quot;</span><span style="color:#D19A66;"> alt</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;My Image&quot;</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;width:100px;height:100px;&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><img src="https://www.w3school.com.cn/i/photo/tulip.jpg" alt="My Image" style="width:100px;height:100px;"><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><a href="https://www.w3cschool.cn/htmltags/att-img-alt.html" target="_blank" rel="noreferrer">alt</a></td><td style="text-align:left;"><em>text</em></td><td style="text-align:left;">规定图像的替代文本。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3cschool.cn/htmltags/att-img-src.html" target="_blank" rel="noreferrer">src</a></td><td style="text-align:left;"><em>URL</em></td><td style="text-align:left;">规定显示图像的 URL。</td></tr></tbody></table><h3 id="链接" tabindex="-1">链接 <a class="header-anchor" href="#链接" aria-label="Permalink to &quot;链接&quot;">​</a></h3><h4 id="网页链接" tabindex="-1">网页链接 <a class="header-anchor" href="#网页链接" aria-label="Permalink to &quot;网页链接&quot;">​</a></h4><h4 id="a" tabindex="-1">a <a class="header-anchor" href="#a" aria-label="Permalink to &quot;a&quot;">​</a></h4><p><code>a</code>标签定义超链接，用于从一张页面链接到另一张页面。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.dotohi.com&quot;</span><span style="color:#D19A66;"> download</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://www.dotohi.com&quot;</span><span style="color:#ABB2BF;">&gt;欢迎来到秘境田园&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><a href="https://www.dotohi.com" download="https://www.dotohi.com">欢迎来到秘境田园</a></p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_a_href.asp" target="_blank" rel="noreferrer">href</a></td><td style="text-align:left;"><em>URL</em></td><td style="text-align:left;">规定链接指向的页面的 URL。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_a_target.asp" target="_blank" rel="noreferrer">target</a><br></td><td style="text-align:left;">_blank<br>_parent<br>_self<br>_top</td><td style="text-align:left;">规定在何处打开被链接文档。</td></tr><tr><td style="text-align:left;">title</td><td style="text-align:left;">文字</td><td style="text-align:left;">提示文本</td></tr></tbody></table><h5 id="打开窗口" tabindex="-1">打开窗口 <a class="header-anchor" href="#打开窗口" aria-label="Permalink to &quot;打开窗口&quot;">​</a></h5><p>下面设置 target 属性在指定窗口打开。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https:www.taobao.com&quot;</span><span style="color:#D19A66;"> target</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;taobao&quot;</span><span style="color:#ABB2BF;">&gt;淘宝&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https:www.baidu.com&quot;</span><span style="color:#D19A66;"> target</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;baidu&quot;</span><span style="color:#ABB2BF;">&gt;百度&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https:www.sina.com&quot;</span><span style="color:#D19A66;"> target</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;sina&quot;</span><span style="color:#ABB2BF;">&gt;新浪&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;d</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#E5C07B;">    window</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">open</span><span style="color:#ABB2BF;">(</span><span style="color:#98C379;">&#39;https:www.baidu.com&#39;</span><span style="color:#ABB2BF;">, </span><span style="color:#98C379;">&#39;baidu&#39;</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h5 id="锚点链接" tabindex="-1">锚点链接 <a class="header-anchor" href="#锚点链接" aria-label="Permalink to &quot;锚点链接&quot;">​</a></h5><p>锚点可以设置跳转到页面中的某个部分。</p><ol><li>为元素添加<code>id</code> 属性来设置锚点</li><li>设置 <code>a</code> 标签的 <code>href</code> 属性</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;#anchor&quot;</span><span style="color:#ABB2BF;">&gt;跳转到锚点处&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;height: 1000px;&quot;</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;anchor&quot;</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;background: green;&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        这是锚点处</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ol start="3"><li>也可以跳转到不同页面的锚点</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">   &lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;other.html#anchor&quot;</span><span style="color:#ABB2BF;">&gt;跳转到其它页面锚点处&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h5 id="邮箱链接" tabindex="-1">邮箱链接 <a class="header-anchor" href="#邮箱链接" aria-label="Permalink to &quot;邮箱链接&quot;">​</a></h5><p>除了页面跳转外可以指定其他链接。使用以下方式也有缺点，邮箱可能会被恶意用户采集到，所以有些用户使用 <code>loveagri#qq.com</code> 然后提示用户 <code>请将#改为@后发邮件</code>的提示形式。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#7F848E;font-style:italic;">&lt;!-- 邮箱 --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;mailto:loveagri@163.com?subject=test&amp;cc=sample@hotmail.com&amp;body=use mailto sample&quot;</span><span style="color:#ABB2BF;">&gt;send email&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">&lt;!--form方式：--&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">form</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;sendmail&#39;</span><span style="color:#D19A66;"> action</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;mailto:sample@163.com&#39;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;cc&#39;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;text&#39;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;sample@hotmail.com&#39;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;subject&#39;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;text&#39;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;test&#39;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;body&#39;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;text&#39;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;use mailto sample&#39;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                                                                                           </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">&lt;!-- 电话 --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;tel:18511056181&quot;</span><span style="color:#ABB2BF;">&gt;call&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><a href="mailto:loveagri@163.com?subject=test&amp;cc=sample@hotmail.com&amp;body=use mailto sample">send email</a></p><p><a href="tel:18511056181">call</a></p><table tabindex="0"><thead><tr><th>参数</th><th>内容</th></tr></thead><tbody><tr><td>to</td><td>收信人</td></tr><tr><td>subject</td><td>主题</td></tr><tr><td>cc</td><td>抄送</td></tr><tr><td>bcc</td><td>暗送</td></tr><tr><td>body</td><td>内容</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">警告</p><p>body里面换行可以这样实现，换行在URL编码里面就是“%0A”</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;mailto:luihuilang@163.com?subject=信件标题&amp;body=%0Aa1: %0Aa2: %0Aa3: &quot;</span><span style="color:#ABB2BF;">&gt;点击&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div><h5 id="下载文件" tabindex="-1">下载文件 <a class="header-anchor" href="#下载文件" aria-label="Permalink to &quot;下载文件&quot;">​</a></h5><p>默认情况下使用链接可以下载浏览器无法处理的文件，如果下载图片需要后台语言告之浏览器<code>mime</code>类型</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">a</span><span style="color:#D19A66;"> target</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;_blank&quot;</span><span style="color:#D19A66;"> href</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;http://www.dotohi.com/logo.png&#39;</span><span style="color:#D19A66;"> download</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&#39;img.png&#39;</span><span style="color:#ABB2BF;">&gt;下载图片&lt;/</span><span style="color:#E06C75;">a</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><a target="_blank" href="http://www.dotohi.com/logo.png" download="img.png">下载图片</a></p><h4 id="" tabindex="-1"><a class="header-anchor" href="#" aria-label="Permalink to &quot;&quot;">​</a></h4><h2 id="表单与列表" tabindex="-1">表单与列表 <a class="header-anchor" href="#表单与列表" aria-label="Permalink to &quot;表单与列表&quot;">​</a></h2><h3 id="表单" tabindex="-1">表单 <a class="header-anchor" href="#表单" aria-label="Permalink to &quot;表单&quot;">​</a></h3><h4 id="form" tabindex="-1">form <a class="header-anchor" href="#form" aria-label="Permalink to &quot;form&quot;">​</a></h4><p>表单应该置于<code>form</code>之中</p><p><code>&lt;form&gt;</code> 元素可以包含以下一个或多个表单元素：</p><ul><li><a href="https://www.w3school.com.cn/tags/tag_input.asp" target="_blank" rel="noreferrer">input</a></li><li><a href="https://www.w3school.com.cn/tags/tag_textarea.asp" target="_blank" rel="noreferrer">textarea</a></li><li><a href="https://www.w3school.com.cn/tags/tag_button.asp" target="_blank" rel="noreferrer">button</a></li><li><a href="https://www.w3school.com.cn/tags/tag_select.asp" target="_blank" rel="noreferrer">select</a></li><li><a href="https://www.w3school.com.cn/tags/tag_option.asp" target="_blank" rel="noreferrer">option</a></li><li><a href="https://www.w3school.com.cn/tags/tag_optgroup.asp" target="_blank" rel="noreferrer">optgroup</a></li><li><a href="https://www.w3school.com.cn/tags/tag_fieldset.asp" target="_blank" rel="noreferrer">fieldset</a></li><li><a href="https://www.w3school.com.cn/tags/tag_label.asp" target="_blank" rel="noreferrer">label</a></li><li><a href="https://www.w3school.com.cn/tags/tag_output.asp" target="_blank" rel="noreferrer">output</a></li></ul><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_accept-charset.asp" target="_blank" rel="noreferrer">accept-charset</a></td><td style="text-align:left;"><em>字符集</em></td><td style="text-align:left;">规定提交表单时要使用的字符编码。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_action.asp" target="_blank" rel="noreferrer">action</a></td><td style="text-align:left;"><em>URL</em></td><td style="text-align:left;">规定提交表单时将表单数据发送到哪里。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_autocomplete.asp" target="_blank" rel="noreferrer">autocomplete</a></td><td style="text-align:left;">on<br>off</td><td style="text-align:left;">规定表单是否应启用自动完成功能。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_enctype.asp" target="_blank" rel="noreferrer">enctype</a></td><td style="text-align:left;">application/x-www-form-urlencoded<br>multipart/form-data<br>text/plain</td><td style="text-align:left;">规定在向服务器提交表单数据时，应该如何对表单数据进行编码。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_method.asp" target="_blank" rel="noreferrer">method</a></td><td style="text-align:left;">get<br>post</td><td style="text-align:left;">规定发送表单数据时使用的 HTTP 方法。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_name.asp" target="_blank" rel="noreferrer">name</a></td><td style="text-align:left;"><em>文本</em></td><td style="text-align:left;">规定表单的名称。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_novalidate.asp" target="_blank" rel="noreferrer">novalidate</a></td><td style="text-align:left;">novalidate</td><td style="text-align:left;">规定提交表单时不应验证表单。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_form_target.asp" target="_blank" rel="noreferrer">target</a></td><td style="text-align:left;">_blank<br>_self<br>_parent<br>_top</td><td style="text-align:left;">规定在何处显示提交表单后收到的响应。</td></tr></tbody></table><h4 id="input" tabindex="-1">input <a class="header-anchor" href="#input" aria-label="Permalink to &quot;input&quot;">​</a></h4><p>文本框用于输入单行文本使用，下面是常用属性与示例。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">表单类型默认为 <code>text</code><br><code>&lt;input type=&quot;button&quot;&gt;</code>按钮<br> <code>&lt;input type=&quot;checkbox&quot;&gt;</code>多选框 <br><code>&lt;input type=&quot;color&quot;&gt;</code> <br><code>&lt;input type=&quot;date&quot;&gt;</code> <br> <code>&lt;input type=&quot;datetime-local&quot;&gt;</code> <br><code>&lt;input type=&quot;email&quot;&gt;</code> <br> <code>&lt;input type=&quot;file&quot;&gt;</code> <br><code>&lt;input type=&quot;hidden&quot;&gt;</code> <br><code>&lt;input type=&quot;image&quot;&gt;</code> <br><code>&lt;br /&gt;&lt;input type=&quot;month&quot;&gt;</code> <br> <code>&lt;input type=&quot;number&quot;&gt;</code> <br><code>&lt;input type=&quot;password&quot;&gt;</code> <br><code>&lt;input type=&quot;radio&quot;&gt;</code> <br><code>&lt;input type=&quot;range&quot;&gt;</code> <br><code>&lt;input type=&quot;reset&quot;&gt;</code> <br> <code>&lt;input type=&quot;search&quot;&gt;</code> <br><code>&lt;input type=&quot;submit&quot;&gt;</code> <br><code>&lt;input type=&quot;tel&quot;&gt;</code> <br><code>&lt;input type=&quot;text&quot;&gt;</code>（默认值） <br> <code>&lt;input type=&quot;time&quot;&gt;</code> <br><code>&lt;input type=&quot;url&quot;&gt;</code> <br><code>&lt;input type=&quot;week&quot;&gt;</code></td></tr><tr><td style="text-align:left;">name</td><td style="text-align:left;">后台接收字段名</td></tr><tr><td style="text-align:left;">required</td><td style="text-align:left;">必须输入</td></tr><tr><td style="text-align:left;">placeholder</td><td style="text-align:left;">提示文本内容</td></tr><tr><td style="text-align:left;">value</td><td style="text-align:left;">默认值</td></tr><tr><td style="text-align:left;">maxlength</td><td style="text-align:left;">允许最大输入字符数</td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;">表单显示长度，一般用不使用而用 <code>css</code> 控制</td></tr><tr><td style="text-align:left;">disabled</td><td style="text-align:left;">禁止使用，不可以提交到后台</td></tr><tr><td style="text-align:left;">readonly</td><td style="text-align:left;">只读，可提交到后台</td></tr><tr><td style="text-align:left;">capture</td><td style="text-align:left;">使用麦克风、视频或摄像头哪种方式获取手机上传文件，支持的值有 microphone, video, camera</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">form</span><span style="color:#D19A66;"> action</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;/action_page.php&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;fname&quot;</span><span style="color:#ABB2BF;">&gt;名字：&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;fname&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;fname&quot;</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;lname&quot;</span><span style="color:#ABB2BF;">&gt;姓氏：&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;lname&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;lname&quot;</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;submit&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;提交&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><form action="/action_page.php"><label for="fname">名字：</label><input type="text" id="fname" name="fname"><br><br><label for="lname">姓氏：</label><input type="text" id="lname" name="lname"><br><br><input type="submit" value="提交"></form><h5 id="调取摄像头" tabindex="-1"><strong>调取摄像头</strong> <a class="header-anchor" href="#调取摄像头" aria-label="Permalink to &quot;**调取摄像头**&quot;">​</a></h5><p>当 input 类型为 file 时手机会让用户选择图片或者拍照，如果想直接调取摄像头使用以下代码。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;file&quot;</span><span style="color:#D19A66;"> capture</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;camera&quot;</span><span style="color:#D19A66;"> accept</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;image/*&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>hidden</code>隐藏表单用于提交后台数据，但在前台内容不显示所以在其上做用样式定义也没有意义。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;hidden&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;id&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;1&quot;</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>submit、button</code>创建提交按钮可以将表单数据提交到后台，有多种方式可以提交数据如使用 AJAX，或 HTML 的表单按钮。</p><ol><li><p>使用 input 构建提交按钮，如果设置了 name 值按钮数据也会提交到后台，如果有多个表单项可以通过些判断是哪个表单提交的。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;submit&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;submit&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;提交表单&quot;</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></li><li><p>使用 button 也可以提交，设置 type 属性为<code>submit</code> 或不设置都可以提交表单。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">button</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;submit&quot;</span><span style="color:#ABB2BF;">&gt;提交表单&lt;/</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></li></ol><p>通过为表单设置 <code>disabled</code> 或 <code>readonly</code> 都可以禁止修改表单，但 <code>readonly</code>表单的数据可以提交到后台。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;web&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;houdunren.com&quot;</span><span style="color:#D19A66;"> readonly</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h5 id="pattern" tabindex="-1">PATTERN <a class="header-anchor" href="#pattern" aria-label="Permalink to &quot;PATTERN&quot;">​</a></h5><p>表单可以通过设置 <code>pattern</code> 属性指定正则验证，也可以使用各种前端验证库如 <a href="http://www.formvalidator.net/#default-validators_custom" target="_blank" rel="noreferrer">formvalidator</a> 或 <a href="https://github.com/validatorjs/validator.js" target="_blank" rel="noreferrer">validator.js</a>。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">pattern</td><td style="text-align:left;">正则表达式验证规则</td></tr><tr><td style="text-align:left;">oninvalid</td><td style="text-align:left;">输入错误时触发的事件</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">form</span><span style="color:#D19A66;"> action</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;text&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;username&quot;</span><span style="color:#D19A66;"> pattern</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;[A-z]{5,20}&quot;</span></span>
<span class="line"><span style="color:#D19A66;">	oninvalid</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;</span><span style="color:#61AFEF;">validate</span><span style="color:#98C379;">(&#39;请输入5~20位字母的用户名&#39;)&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;提交&lt;/</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">	function</span><span style="color:#61AFEF;"> validate</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;font-style:italic;">message</span><span style="color:#ABB2BF;">) {</span></span>
<span class="line"><span style="color:#61AFEF;">		alert</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;">message</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">	}</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">script</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="label" tabindex="-1">label <a class="header-anchor" href="#label" aria-label="Permalink to &quot;label&quot;">​</a></h4><p><code>label</code>标签的 <a href="https://www.w3school.com.cn/tags/att_label_for.asp" target="_blank" rel="noreferrer">for 属性</a> 应当与相关元素的 id 属性相同。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">form</span><span style="color:#D19A66;"> action</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;/action_page.php&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;radio&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;html&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;fav_language&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;HTML&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;html&quot;</span><span style="color:#ABB2BF;">&gt;HTML&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;radio&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;css&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;fav_language&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;CSS&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;css&quot;</span><span style="color:#ABB2BF;">&gt;CSS&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;radio&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;javascript&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;fav_language&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;JavaScript&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;javascript&quot;</span><span style="color:#ABB2BF;">&gt;JavaScript&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;&lt;</span><span style="color:#E06C75;">br</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;submit&quot;</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;提交&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><form action="/action_page.php"><input type="radio" id="html" name="fav_language" value="HTML"><label for="html">HTML</label><br><input type="radio" id="css" name="fav_language" value="CSS"><label for="css">CSS</label><br><input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label><br><br><input type="submit" value="提交"></form><h4 id="textarea" tabindex="-1">textarea <a class="header-anchor" href="#textarea" aria-label="Permalink to &quot;textarea&quot;">​</a></h4><p><code>&lt;textarea&gt;</code> 标签定义多行文本输入控件。</p><table tabindex="0"><thead><tr><th style="text-align:left;">选项</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">cols</td><td style="text-align:left;">列字符数（一般使用 css 控制更好）</td></tr><tr><td style="text-align:left;">rows</td><td style="text-align:left;">行数（一般使用 css 控制更好）</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;w3review&quot;</span><span style="color:#ABB2BF;">&gt;评论 ：&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">textarea</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;w3review&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;w3review&quot;</span><span style="color:#D19A66;"> rows</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;4&quot;</span><span style="color:#D19A66;"> cols</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;50&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	记录生活点点滴滴的地方</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">textarea</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><label for="w3review">评论：</label></p><textarea id="w3review" name="w3review" rows="4" cols="50">在 w3school.com.cn，您将学习如何开发网站。他们提供所有 Web 开发技术的免费教程。
</textarea><h4 id="select" tabindex="-1">select <a class="header-anchor" href="#select" aria-label="Permalink to &quot;select&quot;">​</a></h4><p>元素用于创建下拉列表。</p><table tabindex="0"><thead><tr><th style="text-align:left;">选项</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">multiple</td><td style="text-align:left;">支持多选</td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;">列表框高度</td></tr><tr><td style="text-align:left;">optgroup</td><td style="text-align:left;">选项组</td></tr><tr><td style="text-align:left;">selected</td><td style="text-align:left;">选中状态</td></tr><tr><td style="text-align:left;">option</td><td style="text-align:left;">选项值</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;cars&quot;</span><span style="color:#ABB2BF;">&gt;请选择一个汽车品牌：&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">select</span><span style="color:#D19A66;">  name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;cars&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;cars&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">optgroup</span><span style="color:#D19A66;"> label</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;中国车&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;byd&quot;</span><span style="color:#ABB2BF;">&gt;比亚迪&lt;/</span><span style="color:#E06C75;">option</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;geely&quot;</span><span style="color:#ABB2BF;">&gt;吉利&lt;/</span><span style="color:#E06C75;">option</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">optgroup</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">optgroup</span><span style="color:#D19A66;"> label</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;德国车&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;mercedes&quot;</span><span style="color:#ABB2BF;">&gt;奔驰&lt;/</span><span style="color:#E06C75;">option</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;audi&quot;</span><span style="color:#ABB2BF;">&gt;奥迪&lt;/</span><span style="color:#E06C75;">option</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">optgroup</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">select</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><label for="cars">请选择一个汽车品牌：</label></p><select name="cars" id="cars"><optgroup label="中国车"><option value="byd">比亚迪</option><option value="geely">吉利</option></optgroup><optgroup label="德国车"><option value="mercedes">奔驰</option><option value="audi">奥迪</option></optgroup></select><h5 id="文件上传" tabindex="-1">文件上传 <a class="header-anchor" href="#文件上传" aria-label="Permalink to &quot;文件上传&quot;">​</a></h5><table tabindex="0"><thead><tr><th style="text-align:left;">选项</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">multiple</td><td style="text-align:left;">支持多选</td></tr><tr><td style="text-align:left;">accept</td><td style="text-align:left;">允许上传类型 <code>.png,.psd</code> 或 <code>image/png,image/gif</code></td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">form</span><span style="color:#D19A66;"> action</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#D19A66;"> method</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;POST&quot;</span><span style="color:#D19A66;"> enctype</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;multipart/form-data&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;</span><span style="color:#E06C75;">fieldset</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">		&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;file&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;icon&quot;</span><span style="color:#D19A66;"> multiple</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;multiple&quot;</span><span style="color:#D19A66;"> accept</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;image/png,image/gif&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;/</span><span style="color:#E06C75;">fieldset</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">	&lt;</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;保存&lt;/</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><form action="" method="POST" enctype="multipart/form-data"><fieldset><input type="file" name="icon" multiple="multiple" accept="image/png,image/gif"></fieldset> <button>保存</button></form><h3 id="-1" tabindex="-1"><a class="header-anchor" href="#-1" aria-label="Permalink to &quot;&quot;">​</a></h3><p><code>autocomplete</code>浏览器基于之前键入过的值，应该显示出在字段中填写的选项。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">form</span><span style="color:#D19A66;"> action</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;search&quot;</span><span style="color:#D19A66;"> autocomplete</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;on&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;content&quot;</span><span style="color:#ABB2BF;"> /&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;提交&lt;/</span><span style="color:#E06C75;">button</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">form</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="datalist" tabindex="-1">datalist <a class="header-anchor" href="#datalist" aria-label="Permalink to &quot;datalist&quot;">​</a></h4><p><code>&lt;datalist&gt;</code> 标签为 <a href="https://www.w3school.com.cn/tags/tag_input.asp" target="_blank" rel="noreferrer"> 元素</a>规定预定义选项的列表。用户在输入数据时，将看到预定义选项的下拉列表。<code>&lt;datalist&gt;</code> 元素的 id 属性必须等于 <code>&lt;input&gt;</code> 元素的 <a href="https://www.w3school.com.cn/tags/att_input_list.asp" target="_blank" rel="noreferrer">list 属性</a>（这会把它们绑定在一起）。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">label</span><span style="color:#D19A66;"> for</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;browser&quot;</span><span style="color:#ABB2BF;">&gt;请从列表中选择您的浏览器：&lt;/</span><span style="color:#E06C75;">label</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">input</span><span style="color:#D19A66;"> list</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;browsers&quot;</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;browser&quot;</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;browser&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">datalist</span><span style="color:#D19A66;"> id</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;browsers&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;Edge&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;Firefox&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;Chrome&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;Opera&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">option</span><span style="color:#D19A66;"> value</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;Safari&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">datalist</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="列表" tabindex="-1">列表 <a class="header-anchor" href="#列表" aria-label="Permalink to &quot;列表&quot;">​</a></h3><p>列表的使用与<code>word</code> 等软件的列表概念相似，只不过是应用在网页展示中。</p><h4 id="ol" tabindex="-1">ol <a class="header-anchor" href="#ol" aria-label="Permalink to &quot;ol&quot;">​</a></h4><p>有序列表是指有数字编号的列表项</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#7F848E;font-style:italic;">&lt;!--</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">list-style-type:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    circle      空心圆</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    disc        实心圆</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    square      实心方块</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    decimal     数字</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    upper-alpha 大写字母</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    lower-alpha 小写字母</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    upper-roman 大写罗马数字</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;">    lower-roman 小写罗马数字</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic;"> --&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">ol</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;list-style-type:upper-roman&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;咖啡&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;茶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;牛奶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">ol</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">ol</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;list-style-type:decimal&quot;</span><span style="color:#D19A66;"> start</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;3&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;咖啡&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;茶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;牛奶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">ol</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ol style="list-style-type:upper-roman;"><li>咖啡</li><li>茶</li><li>牛奶</li></ol><ol style="list-style-type:decimal;" start="3"><li>咖啡</li><li>茶</li><li>牛奶</li></ol><h4 id="ul" tabindex="-1">ul <a class="header-anchor" href="#ul" aria-label="Permalink to &quot;ul&quot;">​</a></h4><p>无序列表是没有数字编号的列表项</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">ul</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;list-style-type:circle&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;咖啡&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;茶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;牛奶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">ul</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">ul</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;list-style-type:disc&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;咖啡&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;茶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;牛奶&lt;/</span><span style="color:#E06C75;">li</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">ul</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul style="list-style-type:circle;"><li>咖啡</li><li>茶</li><li>牛奶</li></ul><ul style="list-style-type:disc;"><li>咖啡</li><li>茶</li><li>牛奶</li></ul><h2 id="表格与多媒体" tabindex="-1">表格与多媒体 <a class="header-anchor" href="#表格与多媒体" aria-label="Permalink to &quot;表格与多媒体&quot;">​</a></h2><h3 id="表格" tabindex="-1">表格 <a class="header-anchor" href="#表格" aria-label="Permalink to &quot;表格&quot;">​</a></h3><h4 id="table、tr" tabindex="-1">table、tr <a class="header-anchor" href="#table、tr" aria-label="Permalink to &quot;table、tr&quot;">​</a></h4><p><code>&lt;table&gt;</code> 标签定义了 HTML 表格。</p><p>一个 table表格由一个 <code>&lt;table&gt;</code> 元素和一个或多个 <a href="https://www.w3school.com.cn/tags/tag_tr.asp" target="_blank" rel="noreferrer">tr</a>、 <a href="https://www.w3school.com.cn/tags/tag_th.asp" target="_blank" rel="noreferrer">th</a> 和 <a href="https://www.w3school.com.cn/tags/tag_td.asp" target="_blank" rel="noreferrer">td</a> 元素组成：</p><ul><li><a href="https://www.w3school.com.cn/tags/tag_tr.asp" target="_blank" rel="noreferrer">tr</a> 定义表格行</li><li><a href="https://www.w3school.com.cn/tags/tag_th.asp" target="_blank" rel="noreferrer">th</a> 定义表格标题</li><li><a href="https://www.w3school.com.cn/tags/tag_td.asp" target="_blank" rel="noreferrer">td</a> 定义表格单元格</li></ul><p>HTML 表格还可以包含以下元素：</p><ul><li><a href="https://www.w3school.com.cn/tags/tag_caption.asp" target="_blank" rel="noreferrer">caption</a> 表格标题</li><li><a href="https://www.w3school.com.cn/tags/tag_colgroup.asp" target="_blank" rel="noreferrer">colgroup</a> 用于规定表格中包含一列或多列的分组的格式。</li><li><a href="https://www.w3school.com.cn/tags/tag_thead.asp" target="_blank" rel="noreferrer">thead</a></li><li><a href="https://www.w3school.com.cn/tags/tag_tfoot.asp" target="_blank" rel="noreferrer">tfoot</a></li><li><a href="https://www.w3school.com.cn/tags/tag_tbody.asp" target="_blank" rel="noreferrer">tbody</a></li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">table</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">thead</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;月份&lt;/</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;储蓄&lt;/</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">thead</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">tbody</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;一月&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;￥3400&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;二月&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;￥4500&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">tbody</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">tfoot</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;合计&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;￥7900&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">tfoot</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">table</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><table><thead><tr><th>月份</th><th>储蓄</th></tr></thead><tbody><tr><td>一月</td><td>￥3400</td></tr><tr><td>二月</td><td>￥4500</td></tr></tbody><tfoot><tr><td>合计</td><td>￥7900</td></tr></tfoot></table><h4 id="td" tabindex="-1">td <a class="header-anchor" href="#td" aria-label="Permalink to &quot;td&quot;">​</a></h4><p><a href="https://www.w3school.com.cn/tags/att_td_colspan.asp" target="_blank" rel="noreferrer">colspan</a>和<a href="https://www.w3school.com.cn/tags/att_td_rowspan.asp" target="_blank" rel="noreferrer">rowspan</a>分别设置单元格合并列行。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_td_colspan.asp" target="_blank" rel="noreferrer">colspan</a></td><td style="text-align:left;"><em>数字</em></td><td style="text-align:left;">规定单元格应跨越的列数。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_td_rowspan.asp" target="_blank" rel="noreferrer">rowspan</a></td><td style="text-align:left;"><em>数字</em></td><td style="text-align:left;">设置单元格应跨越的行数。</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">table</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;</span><span style="color:#E06C75;">thead</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;姓名&lt;/</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;电邮&lt;/</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">th</span><span style="color:#D19A66;"> colspan</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;2&quot;</span><span style="color:#ABB2BF;">&gt;电话&lt;/</span><span style="color:#E06C75;">th</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;/</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;/</span><span style="color:#E06C75;">thead</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;</span><span style="color:#E06C75;">tbody</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;Bill Gates&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;bill.gates@example.com&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;138-1234-5678&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">                &lt;</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;186-2345-6789&lt;/</span><span style="color:#E06C75;">td</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">            &lt;/</span><span style="color:#E06C75;">tr</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">        &lt;/</span><span style="color:#E06C75;">tbody</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;/</span><span style="color:#E06C75;">table</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div> <table><thead><tr><th>姓名</th><th>电邮</th><th colspan="2">电话</th></tr></thead><tbody><tr><td>Bill Gates</td><td>bill.gates@example.com</td><td>138-1234-5678</td><td>186-2345-6789</td></tr></tbody></table><h3 id="多媒体" tabindex="-1">多媒体 <a class="header-anchor" href="#多媒体" aria-label="Permalink to &quot;多媒体&quot;">​</a></h3><h4 id="video" tabindex="-1">video <a class="header-anchor" href="#video" aria-label="Permalink to &quot;video&quot;">​</a></h4><p><code>video</code>标签用于在文档中嵌入视频内容，例如电影片段或其他视频流。</p><p><code>&lt;video&gt;</code> 标签包含一个或多个带有不同视频源的 <code>&lt;source&gt;</code> 标签。浏览器将选择它支持的第一个源。</p><p><code>&lt;video&gt;</code> 和 <code>&lt;/video&gt;</code> 标签之间的文本只会在不支持 <code>&lt;video&gt;</code> 元素的浏览器中显示。</p><p>HTML 支持三种视频格式：<code>MP4</code>、<code>WebM</code> 和 <code>OGG</code>。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_autoplay.asp" target="_blank" rel="noreferrer">autoplay</a></td><td style="text-align:left;">autoplay</td><td style="text-align:left;">规定视频准备就绪后立即开始播放。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_controls.asp" target="_blank" rel="noreferrer">controls</a></td><td style="text-align:left;">controls</td><td style="text-align:left;">规定应显示的视频控件（例如播放/暂停按钮等）。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_height.asp" target="_blank" rel="noreferrer">height</a></td><td style="text-align:left;"><em>像素</em></td><td style="text-align:left;">设置视频播放器的高度。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_width.asp" target="_blank" rel="noreferrer">width</a></td><td style="text-align:left;"><em>像素</em></td><td style="text-align:left;">设置视频播放器的宽度。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_loop.asp" target="_blank" rel="noreferrer">loop</a></td><td style="text-align:left;">loop</td><td style="text-align:left;">规定视频将在每次结束时重新开始。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_muted.asp" target="_blank" rel="noreferrer">muted</a></td><td style="text-align:left;">muted</td><td style="text-align:left;">规定应将视频的音频输出静音。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_poster.asp" target="_blank" rel="noreferrer">poster</a></td><td style="text-align:left;"><em>URL</em></td><td style="text-align:left;">规定在下载视频期间或在用户点击播放按钮之前显示的图像。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_preload.asp" target="_blank" rel="noreferrer">preload</a></td><td style="text-align:left;">autometadatanone</td><td style="text-align:left;">规定在页面加载时，视频是否应加载或应如何加载。<br>如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 &quot;autoplay&quot;，则忽略该属性。<br>如果视频观看度低可以设置为 <code>preload=&quot;none&quot;</code> 不加载视频数据减少带宽。<br>如果设置为 <code>preload=metadata</code>值将加载视频尺寸或关键针数据，目的也是减少带宽占用。<br>设置为<code>preload=&quot;auto&quot;</code> 时表示将自动加载视频数据</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_video_src.asp" target="_blank" rel="noreferrer">src</a></td><td style="text-align:left;"><em>URL</em></td><td style="text-align:left;">规定视频文件的 URL。</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">video</span><span style="color:#D19A66;"> width</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;640&quot;</span><span style="color:#D19A66;"> height</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;360&quot;</span><span style="color:#D19A66;"> controls</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">source</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://assets.mixkit.co/videos/4664/4664-720.mp4&quot;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;video/mp4&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">source</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://video-previews.elements.envatousercontent.com/files/477fac5f-fe5f-4672-80c3-edd1bbd0ed44/video_preview_h264.mp4&quot;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;video/mp4&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  您的浏览器不支持视频标签。</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">video</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><video width="640" height="360" controls><source src="https://assets.mixkit.co/videos/4664/4664-720.mp4" type="video/mp4"><source src="https://video-previews.elements.envatousercontent.com/files/477fac5f-fe5f-4672-80c3-edd1bbd0ed44/video_preview_h264.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video><h4 id="audio" tabindex="-1">audio <a class="header-anchor" href="#audio" aria-label="Permalink to &quot;audio&quot;">​</a></h4><p><code>&lt;audio&gt;</code> 标签用于在文档中嵌入声音内容，例如音乐或其他音频流。</p><p><code>&lt;audio&gt;</code> 标签可包含一个或多个拥有不同音频源的 <code>&lt;source&gt;</code> 标签。浏览器将选择它支持的第一个源。</p><p><code>&lt;audio&gt;</code> 和 <code>&lt;/audio&gt;</code> 标签之间的文本只会在不支持 <code>&lt;audio&gt;</code> 元素的浏览器中显示。</p><p>HTML 支持三种音频格式：MP3、WAV 和 OGG。</p><table tabindex="0"><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">值</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_audio_autoplay.asp" target="_blank" rel="noreferrer">autoplay</a></td><td style="text-align:left;">autoplay</td><td style="text-align:left;">规定音频将在准备就绪后立即开始播放。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_audio_controls.asp" target="_blank" rel="noreferrer">controls</a></td><td style="text-align:left;">controls</td><td style="text-align:left;">规定应显示音频控件（例如播放/暂停按钮等）。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_audio_loop.asp" target="_blank" rel="noreferrer">loop</a></td><td style="text-align:left;">loop</td><td style="text-align:left;">规定音频将在每次结束后重新开始。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_audio_muted.asp" target="_blank" rel="noreferrer">muted</a></td><td style="text-align:left;">muted</td><td style="text-align:left;">规定音频输出应静音。</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_audio_preload.asp" target="_blank" rel="noreferrer">preload</a></td><td style="text-align:left;">autometadatanone</td><td style="text-align:left;">规定是否以及如何在页面加载时加载音频。<br> 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 &quot;autoplay&quot;，则忽略该属性。 如果视频观看度低可以设置为 <code>preload=&quot;none&quot;</code> 不加载视频数据减少带宽。 如果设置为 <code>preload=&quot;metadata&quot;</code>值将加载视频尺寸或关键针数据，目的也是减少带宽占用。 设置为<code>preload=&quot;auto&quot;</code> 时表示将自动加载视频数据</td></tr><tr><td style="text-align:left;"><a href="https://www.w3school.com.cn/tags/att_audio_src.asp" target="_blank" rel="noreferrer">src</a></td><td style="text-align:left;"><em>URL</em></td><td style="text-align:left;">规定音频文件的 URL。</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">audio</span><span style="color:#D19A66;"> controls</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">source</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://music-cdn.icons8.com/preview/124/ee3e7e77-5f8e-4bc4-ba06-8a16fa2d52ba.mp3&quot;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;audio/mp3&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">source</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://music-cdn.icons8.com/preview/911/4dc36f63-27cb-4744-a1ee-b944f5c827c0.mp3&quot;</span><span style="color:#D19A66;"> type</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;audio/mp3&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  您的浏览器不支持 audio 标签。</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">audio</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><audio controls><source src="https://music-cdn.icons8.com/preview/124/ee3e7e77-5f8e-4bc4-ba06-8a16fa2d52ba.mp3" type="audio/mp3"><source src="https://music-cdn.icons8.com/preview/911/4dc36f63-27cb-4744-a1ee-b944f5c827c0.mp3" type="audio/mp3"> 您的浏览器不支持 audio 标签。 </audio></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新: <time datetime="2024-12-30T14:20:32.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/frontend/html/emmet.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>下一篇</span><span class="title" data-v-e257564d>Emmet语法总结</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    
    
  </body>
</html>